<template>
    <div id="app" class="pmp-cloud-slide">
        <EllipseCarousel :arrow="'hover'" :autoplaySpeed="8000" :elementclick="false" :height="280" @on-change="onChange">
            <EllipseCarouselItem v-for="(item, index) in cloudData" :key="index" :class="item.ismain ? 'active' : ''">
                <div class="iconbg">{{ item.name }}</div>
            </EllipseCarouselItem>
        </EllipseCarousel>
    </div>
</template>

<script>

// import { EllipseCarousel,EllipseCarouselItem } from '../dist-packages/ellipse-carousel.umd'

export default {
    name: 'App',
    // components: {EllipseCarousel,EllipseCarouselItem},
    data() {
        return {
            cloudData: [
                { name: "云总量", ismain: true },
                { name: "阿里云" },
                { name: "科研云" },
                { name: "AWS" },
                { name: "教育云" },
                { name: "腾讯云" }
            ],
        };
    },
    methods:{
        onChange(index){
            console.log(index)
        }
    }
}
</script>
<style lang="less">
body{
    background-color:#0a2241;

    .pmp-cloud-slide{
        width: 600px;
        background: url(./assets/bg.png) no-repeat;
        background-size: cover;
        color: #fff;
        margin: 100px auto 0;

        .iconbg{
            background: url(./assets/cloudiconbg.png) no-repeat;
            height: 100px;
            width: 100px;
            background-size: contain;
            text-align: center;
            position: absolute;
            left: 50%;
            top:50%;
            transform: translateX(-50%) translateY(-50%);
            cursor: pointer;
        }

        .active{
            .iconbg{
                background-image: url(./assets/cloudiconbgactive.png);
            }

        }

       .ellipse-carousel-item-active{
           .iconbg{
                &::after{
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    top:0;
                    background: url(./assets/cloudiconlight.png) no-repeat;
                    background-size: cover;
                }
            }

       } 
    }
}
</style>
